/* ------------------------------------------------------------------------------
*
*  # Ladda progress buttons
*
*  Buttons with built-in loading indicators
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */

// Common styles
// ------------------------------

.btn-ladda {
  &,
  .ladda-spinner,
  .ladda-label {
    .transition(all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s);
  }

  // Spinner
  .ladda-spinner {
    position: absolute;
    z-index: 2;
    display: inline-block;
    top: 50%;
    pointer-events: none;
    .opacity(0);
  }

  // Label
  .ladda-label {
    z-index: 3;
  }

  // Progress bar
  .ladda-progress {
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background-color: fade(#000, 20%);
    visibility: hidden;
    .transition(all linear 0.3s);
    .opacity(0);
  }
  &[data-loading] .ladda-progress {
    visibility: visible;
    .opacity(1);
  }
}

// Zoom animation
// ------------------------------

.btn-ladda {

  // Common
  &[data-style=zoom-in],
  &[data-style=zoom-out] {
    overflow: hidden;

    &,
    .ladda-spinner,
    .ladda-label {
      .transition(0.3s ease all);
    }

    // Label
    .ladda-label {
      position: relative;
      display: inline-block;
    }

    // Spinner
    .ladda-spinner {
      left: 50%;
    }

    // Loading
    &[data-loading] {
      .ladda-label {
        .opacity(0);
      }

      .ladda-spinner {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        .opacity(1);
      }
    }
  }

  // Zoom in
  &[data-style=zoom-in] {
    .ladda-spinner {
      .scale(0.2);
    }

    &[data-loading] {
      .ladda-label {
        .scale(2.2);
      }
    }
  }

  // Zoom out
  &[data-style=zoom-out] {
    .ladda-spinner {
      .scale(2.5);
    }

    &[data-loading] {
      .ladda-label {
        .scale(0.5);
      }
    }
  }
}

// Expand animation
// ------------------------------

.btn-ladda {

  // Left
  &[data-style=expand-left] {
    overflow: hidden;

    .ladda-spinner {
      left: 20px;
    }

    &[data-loading] {
      padding-left: 35px;

      .ladda-spinner {
        .opacity(1);
      }
    }
  }

  // Right
  &[data-style=expand-right] {
    overflow: hidden;

    .ladda-spinner {
      right: 20px;
    }

    &[data-loading] {
      padding-right: 35px;

      .ladda-spinner {
        .opacity(1);
      }
    }
  }

  // Up
  &[data-style=expand-up] {
    overflow: hidden;

    .ladda-spinner {
      top: -16px;
      left: 50%;
    }

    &[data-loading] {
      padding-top: 40px;

      .ladda-spinner {
        top: 12px;
        margin-top: 8px;
        .opacity(1);
      }
    }
  }

  // Down
  &[data-style=expand-down] {
    overflow: hidden;

    .ladda-spinner {
      top: 44px;
      left: 50%;
    }
    &[data-loading] {
      padding-bottom: 40px;

      .ladda-spinner {
        .opacity(1);
      }
    }
  }
}

// Slide animation
// ------------------------------

.btn-ladda {

  // Left
  &[data-style=slide-left] {
    overflow: hidden;

    .ladda-label {
      left: 0;
      position: relative;
    }

    .ladda-spinner {
      right: 0;
    }

    &[data-loading] {
      .ladda-label {
        left: -100%;
        .opacity(0);
      }

      .ladda-spinner {
        right: 50%;
        .opacity(1);
      }
    }
  }

  // Right
  &[data-style=slide-right] {
    overflow: hidden;

    .ladda-label {
      right: 0;
      position: relative;
    }

    .ladda-spinner {
      left: 0;
    }

    &[data-loading] {
      .ladda-label {
        right: -100%;
        .opacity(0);
      }

      .ladda-spinner {
        left: 50%;
        .opacity(1);
      }
    }
  }

  // Up
  &[data-style=slide-up] {
    overflow: hidden;

    .ladda-label {
      top: 0;
      position: relative;
    }

    .ladda-spinner {
      top: 100%;
      left: 50%;
    }

    &[data-loading] {
      .ladda-label {
        top: -16px;
        .opacity(0);
      }

      .ladda-spinner {
        top: 16px;
        .opacity(1);
      }
    }
  }

  // Down
  &[data-style=slide-down] {
    overflow: hidden;

    .ladda-label {
      top: 0;
      position: relative;
    }

    .ladda-spinner {
      top: -100%;
      left: 50%;
    }

    &[data-loading] {
      .ladda-label {
        top: 16px;
        .opacity(0);
      }

      .ladda-spinner {
        top: 16px;
        .opacity(1);
      }
    }
  }
}

// Fade animation
// ------------------------------

.btn-ladda {
  &[data-style=fade] {
    overflow: hidden;

    .ladda-spinner {
      left: 50%;
    }

    &[data-loading] {
      .ladda-label {
        .opacity(0);
      }

      .ladda-spinner {
        .opacity(1);
      }
    }
  }
}

// Radius animation
// ------------------------------

.btn-ladda {
  &[data-style=radius] {
    overflow: hidden;
    border-radius: @border-radius-small;
    .transition(all ease-in-out 0.5s);

    .ladda-spinner {
      left: 50%;
    }

    &[data-loading] {
      border-radius: @border-radius-large;

      .ladda-label {
        .opacity(0);
      }

      .ladda-spinner {
        .opacity(1);
      }
    }
  }
}
